<!--  -->
<template>
  <div class='icons'>
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
          <div class="icon" v-for="item of page" :key="item.id">
            <div class="icon-img">
                <img class="icon-img-content" :src="item.imgUrl">
            </div>
            <p class="icon-desc">
                {{item.desc}}
            </p>
          </div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'HomeIcons',
    props:{
      iconList:Array
    },
    components: {},
    data() {
      //这里存放数据
      return {
        swiperOption: {
          pagination: ".swiper-pagination",
          autoplay: false
        }
        // ,
        // iconList: [
        //   {
        //     id: "0001",
        //     imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     title: "热门景点1"
        //   }, {
        //     id: "0002",
        //     imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     title: "热门景点2"
        //   }, {
        //     id: "0003",
        //     imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     title: "热门景点3"
        //   }, {
        //     id: "0004",
        //     imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     title: "热门景点4"
        //   }, {
        //     id: "0005",
        //     imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     title: "热门景点5"
        //   }, {
        //     id: "0006",
        //     imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     title: "热门景点6"
        //   }, {
        //     id: "0007",
        //     imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     title: "热门景点7"
        //   }, {
        //     id: "0008",
        //     imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     title: "热门景点8"
        //   }, {
        //     id: "0009",
        //     imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     title: "热门景点9"
        //   }]
      };
    },
    //监听属性 类似于data概念
    computed: {
        //定义一个pages的数据，由函数返回回来的内容
        pages () {
            // this.iconList.forEach((item,index) => {
            //     const page = Math.floor(index/8);//向下取整
            //     const ob = pages[page];
            //     console.log("!ob==="+!ob);
            //     console.log(index + JSON.stringify(ob))
            //     if (!ob) {
            //         pages[page] = [];
            //     }
            //     pages[page].push(item);
            // });
            // console.log("pages======="+pages)
            // return pages;


          // 最终分页结果
          const pages = []
          // 遍历icon列表
          this.iconList.forEach((item,index) => {
              // 每8条为一页；例：0-7为第一页 
              // page为当前页码；
              const page =Math.floor(index / 8)//向下取整
              // 判断pages中当前页的存储数组是否已声明，未声明则声明当前页为数组格式；
              if(!pages[page]){
                  pages[page]=[]
              }
              // 将当前icon信息放入对应的页码数组中；
              pages[page].push(item)
          })
          // 返回分页之后的icon集合；
          return pages
        }
        
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

/*@import url(); 引入公共css类*/
<style lang="stylus" scoped>
  @import '~styles/varibles.styl';
  @import '~styles/mixins.styl'
  .icons >>> .swiper-container
    height: 0
    padding-bottom: 50%
  .icons
    margin-top .1rem
    .icon
      width 25%
      float left
      padding-bottom 25%
      overflow hidden
      position relative
      height 0
      .icon-img
        position absolute
        top 0
        left 0
        right 0
        bottom .44rem
        box-sizing border-box
        padding .1rem
        .icon-img-content
          height 100%
          display block
          margin 0 auto
      .icon-desc
        position absolute
        bottom 0
        height .44rem
        line-height .44rem
        color $darkTextColor
        text-align center
        width 100%
        ellipsis()
</style>

